<table class="table l-info-table">
    <caption>Information</caption>
    <colgroup>
        <col width="15%">
        <col width="35%">
        <col width="15%">
        <col width="35%">
    </colgroup>
    <tbody>
    <tr>
        <th>Application Name</th>
        <td [class.l-not-same]="!isSameApplication()">{{agentData.applicationName}}
            <button *ngIf="!isSameApplication()" (click)="onClickNotSameBtn($event)" class="l-not-same-button"><i
                    class="fas fa-comment-alt"></i></button>
        </td>
        <th>Agent Version</th>
        <td>{{agentData.agentVersion}}</td>
    </tr>
    <tr>
        <th>Agent Id</th>
        <td>{{agentData.agentId}} {{ agentData.agentName ? " (name: " + agentData.agentName + ")" : "" }}</td>
        <th>PID</th>
        <td>{{agentData.pid}}</td>
    </tr>
    <tr>
        <th>Hostname</th>
        <td>{{agentData.hostName}}</td>
        <th>JVM (GC Type)</th>
        <td>{{agentData.jvmInfo?.jvmVersion}} ({{agentData.jvmInfo?.gcTypeName}})</td>
    </tr>
    <tr>
        <th>IP</th>
        <td>{{agentData.ip}}</td>
        <th>Start Time</th>
        <td>{{formatDate(agentData.startTimestamp)}} </td>
    </tr>
    <tr>
        <th>Service Type</th>
        <td>{{agentData.serviceType}} ({{agentData.serverMetaData?.serverInfo}}) <span class="l-category blue"
                                                                                       (click)="toggleDetailInfo()">Detail <span
                class="fas fa-caret-down"></span></span></td>
        <th>End Status</th>
        <td>{{agentData.status?.state?.desc}} (last checked : {{formatDate(agentData.status?.eventTimestamp)}})</td>
    </tr>
    <tr [hidden]="isHideDetailInfo">
        <td colspan="4" class="l-sub-table">
            <table class="table">
                <caption></caption>
                <colgroup>
                    <col width="20%">
                    <col width="">
                </colgroup>
                <tbody>
                <tr>
                    <td>Server Info</td>
                    <td>{{isServiceInfoEmpty() ? "" : agentData.serverMetaData.serverInfo}}</td>
                </tr>
                <tr>
                    <td>JVM Arguments</td>
                    <td>
                        <div class="l-argument-list">
                            <div *ngFor="let vm of agentData.serverMetaData?.vmArgs">{{vm}}</div>
                        </div>
                    </td>
                </tr>
                <tr class="l-server-info-list-local">
                    <td>Services</td>
                    <td>
                        <ng-container *ngIf="!isServiceInfoEmpty()">
                            <div class="l-server-info-service-list">
                                <ul class="l-server-info-list">
                                    <li *ngFor="let service of agentData.serverMetaData?.serviceInfos; let i = index"
                                        [class.active]="i === selectedServiceIndex"
                                        (click)="onSelectService(i)">{{service.serviceName}} <span
                                            class="fas fa-angle-right"></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="l-server-info-lib-list">
                                <ul>
                                    <li *ngFor="let lib of getSelectedServiceLib()">{{lib}}</li>
                                </ul>
                            </div>
                        </ng-container>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
